import React, {useEffect, useRef, useState} from "react";
import {Button, ColorPicker, Flex, Form, Input, Slider} from "antd";
import styles from "@/pages/ObsManager/dataOriginModal.less";
import Color from "@umijs/utils/compiled/color";
import {colorToNumber, numberToColor} from "@/utils/utils";
import {useMount} from "ahooks";

const SceneModal = (props) => {
    // 在这里可以访问传递的数据
    const receivedData = props.data;
    const [fontData, setFontData, getFontData] = useState({
        fontText: '',
        fontSize: 36,
        fontColor: '#fc9a03',
        fontOpacity: 100,
        fontBkColor: '#3c3f41',
        fontBkOpacity: 0,
    });
    const closeDynamicView = async () => {
        await window.tm?.ipcRenderer.invoke('closeObsModal')
    }
    const dynamicView = async (path) => {
        await window.tm?.ipcRenderer.invoke('showObsModal', {
            "path": path
        })
    }
    useEffect(() => {
        getSourceSettings();
    }, []);
    const getSourceSettings = async () => {
        const result = await window.tm?.ipcRenderer.invoke('getSourceSettings', {
            sceneName: receivedData.data.sceneName,
            name: receivedData.data.name
        })
        if (typeof result.settings.text !== "object") {
            setFontData({
                fontText: result.settings.text,
                fontSize: result.settings.font.size,
                fontColor: numberToColor(result.settings.color),
                fontOpacity: result.settings.opacity,
                fontBkColor: numberToColor(result.settings.bk_color),
                fontBkOpacity: result.settings.bk_opacity,
            });
        }
        console.log("result2222222", result)
    }
    const preview = useRef(null)
    useMount(() => {

        async function init() {
            const setupPreview = async () => {
                if (!preview.current) return
                const {width, height, x, y} = preview.current.getBoundingClientRect();
                const result = await window.tm?.ipcRenderer.invoke('preview-init-child', {
                    width,
                    height,
                    x,
                    y
                });
                preview.style = `flex-basis:${result.height}px!important`;
                return result
            }

            async function resizePreview() {

                const previewContainer = preview.current

                if (!previewContainer) return
                const {width, height, x, y} = previewContainer.getBoundingClientRect();
                const result = await window.tm!.ipcRenderer.invoke('preview-bounds-child', {
                    width,
                    height,
                    x,
                    y,
                });
                previewContainer.style = `flex-basis: ${result.height}px!important`;
            }

            const previewSize = await setupPreview()
            if (previewSize) {
                preview.current.innerHTML = ''
            }
            const ro = new ResizeObserver(resizePreview);
            if (preview) {
                ro.observe(preview.current);
            }

        }

        init()
    })

    const submit = async () => {
        const updateData = {
            sceneName: receivedData.data.sceneName,
            name: receivedData.data.name,
            updateSettings: {
                color: colorToNumber(fontData.fontColor),
                opacity: fontData.fontOpacity,
                text: fontData.fontText,
                font: {
                    face: 'Arial',
                    size: fontData.fontSize,
                },
                bk_color: colorToNumber(fontData.fontBkColor), // 设置背景色为蓝色
                bk_opacity: fontData.fontBkOpacity,
            }
        };
        const result = await window.tm?.ipcRenderer.invoke('updateSourceSettings', updateData);
        console.log("result", result)
    }
    return (
        <Flex gap="middle" vertical={"vertical"} style={{height: "100%", backgroundColor: "#2e477e"}}>
            <div

                id="preview"
                ref={preview}
                style={{height: '20px'}}
                className={'preview'}>
                <div style={{
                    minWidth: "50%",
                    maxWidth: "100%",
                    height: "100%",
                    textAlign: "center",
                    backgroundColor: "#000000",
                    fontSize: fontData.fontSize,
                }}>
                </div>
            </div>
            <div style={{
                width: "100%",
                display: "flex",
                justifyContent: "center",
                flex: '1 1 200px',
                overflowY: 'auto'
            }}>
                <Form
                    labelCol={{span: 6}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                    initialValues={{size: "default"}}
                    size={"default"}
                    style={{width: "100%"}}
                >
                    <Form.Item label="字体大小" style={{paddingTop: "45px"}}>
                        <Slider max={288} min={9} value={fontData.fontSize}
                                onChange={(value: number) => {
                                    console.log("setFontSizeData", value);
                                    fontData.fontSize = value;
                                    setFontData(JSON.parse(JSON.stringify(fontData)));
                                    submit()
                                }}/>
                    </Form.Item>
                    <Form.Item label="文本" style={{paddingTop: "45px"}}>
                        <Input.TextArea value={fontData.fontText} rootClassName={styles.fontAttributeTextArea}
                                        style={{}} onChange={(e) => {
                            console.log("eeee", e)
                            fontData.fontText = e.target.value;
                            setFontData(JSON.parse(JSON.stringify(fontData)));
                            submit()
                        }}/>
                    </Form.Item>
                    <Form.Item label="不透明度" style={{paddingTop: "45px"}}>
                        <Slider defaultValue={fontData.fontOpacity} max={100} min={0} value={fontData.fontOpacity}
                                onChange={(value: number) => {
                                    console.log("setFontOpacity", value);
                                    fontData.fontOpacity = value;
                                    setFontData(JSON.parse(JSON.stringify(fontData)));
                                    submit()
                                }}/>
                    </Form.Item>
                    <Form.Item label="字体颜色" style={{paddingTop: "45px"}}>
                        <ColorPicker
                            showText
                            defaultValue={fontData.fontColor}
                            value={fontData.fontColor}
                            placement={'topLeft'}
                            onChange={(value: Color, hex: string) => {
                            console.log("setFontColor", value);
                            console.log("setFontColor", hex);
                            fontData.fontColor = hex;
                            setFontData(JSON.parse(JSON.stringify(fontData)));
                            submit()
                        }}/>
                    </Form.Item>

                    <Form.Item label="背景不透明度" style={{paddingTop: "45px"}}>
                        <Slider defaultValue={fontData.fontBkOpacity} max={100} min={0} value={fontData.fontBkOpacity}
                                onChange={(value: number) => {
                                    console.log("setFontBkOpacity", value);
                                    fontData.fontBkOpacity = value;
                                    setFontData(JSON.parse(JSON.stringify(fontData)));
                                    submit()
                                }}/>
                    </Form.Item>
                    <Form.Item label="背景颜色" style={{paddingTop: "45px"}}>
                        <ColorPicker showText defaultValue={fontData.fontBkColor} value={fontData.fontBkColor} onChange={(value: Color, hex: string) => {
                            console.log("Color", hex);
                            fontData.fontBkColor = hex;
                            setFontData(JSON.parse(JSON.stringify(fontData)));
                            submit()
                        }}/>
                    </Form.Item>

                </Form>
            </div>
            <div style={{
                width: "100%",
                flex: "0 1 40px",
                display: "flex",
                justifyContent: "flex-end",
                backgroundColor: "#1c295a",
                alignItems: "center",
                zIndex: 100000
            }}>
                <Button type={"primary"} style={{marginRight: "20px", backgroundColor: "#293d76"}}
                        onClick={async () => {
                            await closeDynamicView();
                        }}>取消</Button>
                <Button type={"primary"} style={{marginRight: "20px", backgroundColor: "#293d76"}}
                        onClick={async () => {
                            await closeDynamicView();
                        }}>确认</Button>
            </div>
        </Flex>
    );
};

export default SceneModal;